<!-- 菜谱详情页 -->
<template>
	<view class="dish_info">
		<!-- 顶部导航栏 -->
		<cu-custom bgColor="bg-gradual-red" :isBack="true">
		    <block slot="backText">返回</block>
		    <block slot="content">炸鸡柳</block>
		</cu-custom>
		<!-- 获取后端接口的数据（导航栏） 后端设计完成后，取消注释 -->
<!-- 		<cu-custom bgColor="bg-gradual-red" :isBack="true">
		    <block slot="backText">返回</block>
		    <block slot="content">{{this.detail.dishName.toString()}}</block>
		</cu-custom> -->
		
		<!-- 菜谱图片 -->
		<view class="dishImg">
			<image src="../../static/img/hotMeal1.jpg"></image>
		</view>
		<!-- 获取后端接口的数据（菜谱图片） 后端设计完成后，取消注释 -->
<!-- 		<view class="dishImg">
			<image :src="this.detail.imageUrl"></image>
		</view> -->
		
		<!-- 除图片外,其他菜谱信息 -->
		<!-- 注释为获取后端接口数据 后端设计完成后，取消注释 -->
		<view class="info_other">
			<view class="top_other">
				<view class="top_text">
					<view class="dishInfoName">炸鸡柳<!-- {{this.detail.dishName}} --></view>
					<view>
						<!-- 菜谱作者 -->
						<text>凝露冰心<!-- {{this.detail.author}} --></text>
						<!-- 菜谱浏览量 -->
						<text>38.5万浏览<!-- {{this.detail.viewNum}}浏览 --></text>
						<!-- 菜谱收藏量 -->
						<text>2130收藏<!-- {{this.detail.collectNum}}收藏 --></text>
					</view>
				</view>
				<view class="top_button">
					<button>收藏</button>
				</view>
			</view>


			<!-- 菜谱简单介绍：工艺、口味、时间、适宜人群 -->
			<view class="briefInfo">
				<!-- 工艺 -->
				<view class="display_item">
					<view class="info_item">
						<view class="info_icon">
							<view class="iconfont icon-guo" style="color: #FF8800; font-size: 70rpx; float: right; padding-top: 20rpx; padding-right: 20rpx;"></view>
						</view>
						<view class="info_text">
							<text>工艺</text>
							<text>炸<!-- {{this.detail.menuCraft}} --></text>
							
						</view>
					</view>
				</view>
				<!-- 口味 -->
				<view class="display_item">
					<view class="info_item">
						<view class="info_icon">
							<view class="iconfont icon-tiaowei" style="color: #FF8800; font-size: 86rpx; float: right; padding-top: 10rpx; padding-right: 20rpx;"></view>
						</view>
						<view class="info_text">
							<text>口味</text>
							<text>香辣味<!-- {{this.detail.menuTaste}} --></text>
						</view>
					</view>	
				</view>
				<!-- 时间 -->
				<view class="display_item">
					<view class="info_item">
						<view class="info_icon">
							<view class="iconfont icon-shijian" style="color: #FF8800; font-size: 80rpx; float: right; padding-top: 20rpx; padding-right: 20rpx;"></view>
						</view>
						<view class="info_text">
							<text>时间</text>
							<text>15分钟<!-- {{this.detail.menuTime}}分钟 --></text>
						</view>
					</view>				
				</view>
				<!-- 适宜人群 -->
				<view class="display_item">
					<view class="info_item">
						<view class="info_icon">
							<view class="iconfont icon-renqun" style="color: #FF8800; font-size: 80rpx; float: right; padding-top: 20rpx; padding-right: 20rpx;"></view>
						</view>
						<view class="info_text">
							<text>适宜人群</text>
							<text>儿童、青少年<!-- {{this.detail.suitableUser}} --></text>
						</view>
					</view>
				</view>
			</view>
			
			<!--菜谱特色-->
			<view class="dishItem">
				<view class="item_left">
					<view class="text_left">
						<text>菜谱特色</text>
						<text>feature</text>
					</view>
				</view>
				<view class="item_right">
					<view class="text_right">KFC、麦当劳的炸鸡柳吃腻了，自己买了鸡柳肉来炸，也是健康美味的哦，味道一点不差呢<!-- {{this.detail.dishFeature}} --></view>
				</view>
			</view>
			
			<!--菜谱主料-->
			<view class="dishItem">
				<view class="item_left">
					<view class="text_left">
						<text>菜谱主料</text>
						<text>main</text>
					</view>
				</view>
				<view class="item_right">
					<!-- button要循环主料中的数据，以","为分隔符分隔主料字符串 -->
					<view class="button_right">
						<button size="mini">鸡胸肉</button>
						<view v-for="item in mainList" :key="item.index">
							<button size="mini">{{item}}</button>
						</view>
					</view>
				</view>
			</view>
			<!--菜谱辅料-->
			<view class="dishItem">
				<view class="item_left">
					<view class="text_left">
						<text>菜谱辅料</text>
						<text>others</text>
					</view>
				</view>
				<view class="item_right">
					<!-- button要循环辅料中的数据，以","为分隔符分隔辅料字符串 -->
					<view class="button_right">
						<view v-for="item in minorList" :key="item.index">
							<button>{{item}}</button>
						</view>
						<button size="mini">新奥尔良腌料</button>
						<button size="mini">牛奶</button>
						<button size="mini">油</button>
						<button size="mini">玉米淀粉</button>
						<button size="mini">普通面粉</button>
						<button size="mini">水</button>
						<button size="mini">普通面粉</button>
						<button size="mini">水</button>
						<button size="mini">普通面粉</button>
						<button size="mini">水</button>
						<button size="mini">普通面粉</button>
						<button size="mini">水</button>
						<button size="mini">普通面粉</button>
						<button size="mini">水</button>
						<button size="mini">普通面粉</button>
						<button size="mini">水</button>
					</view>
				</view>
			</view>
			
			<!-- 菜谱做法 -->
			<!-- 获取后端接口数据（菜谱名） 后端设计完成后，取消注释 -->
			<view class="method">
				<view class="cu-bar bg-white" style="border-radius: 20rpx 20rpx 0 0;">
					<view class="action sub-title">
						<text class="text-xl text-bold text-black" style="font-size: 38rpx;">炸鸡柳<!-- {{this.detail.dishName}} -->的做法</text>
						<text class="bg-yellow"></text>
						<!-- last-child选择器-->
					</view>
				</view>
				<view class="step_list">
					<view class="step_item">
						<view class="display_left">
							<view class="step_left">
								<text>步骤</text>
								<text>step</text>
								<text>1</text>
							</view>	
						</view>
						<view class="display_right">
							<view class="step_right">
								<image src="../../static/img/hotMeal1.jpg"></image>
								<text>
									鸡胸切成比小手指略细的条，玉米淀粉和面粉加清水调成半流动的面糊。鸡胸切成比小手指略细的条，玉米淀粉和面粉加清水调成半流动的面糊。鸡胸切成比小手指略细的条，玉米淀粉和面粉加清水调成半流动的面糊。鸡胸切成比小手指略细的条，玉米淀粉和面粉加清水调成半流动的面糊。鸡胸切成比小手指略细的条，玉米淀粉和面粉加清水调成半流动的面糊。鸡胸切成比小手指略细的条，玉米淀粉和面粉加清水调成半流动的面糊。鸡胸切成比小手指略细的条，玉米淀粉和面粉加清水调成半流动的面糊。
								</text>
							</view>	
						</view>
					</view>
					<view class="step_item">
						<view class="display_left">
							<view class="step_left">
								<text>步骤</text>
								<text>step</text>
								<text>2</text>
							</view>	
						</view>
						<view class="display_right">
							<view class="step_right">
								<image src="../../static/img/hotMeal1.jpg"></image>
								<text>
									鸡胸切成比小手指略细的条，玉米淀粉和面粉加清水调成半流动的面糊。鸡胸切成比小手指略细的条，玉米淀粉和面粉加清水调成半流动的面糊。鸡胸切成比小手指略细的条，玉米淀粉和面粉加清水调成半流动的面糊。鸡胸切成比小手指略细的条，玉米淀粉和面粉加清水调成半流动的面糊。鸡胸切成比小手指略细的条，玉米淀粉和面粉加清水调成半流动的面糊。鸡胸切成比小手指略细的条，玉米淀粉和面粉加清水调成半流动的面糊。鸡胸切成比小手指略细的条，玉米淀粉和面粉加清水调成半流动的面糊。
								</text>
							</view>	
						</view>
					</view>
					<view class="step_item">
						<view class="display_left">
							<view class="step_left">
								<text>步骤</text>
								<text>step</text>
								<text>3</text>
							</view>	
						</view>
						<view class="display_right">
							<view class="step_right">
								<image src="../../static/img/hotMeal1.jpg"></image>
								<text>
									鸡胸切成比小手指略细的条，玉米淀粉和面粉加清水调成半流动的面糊。鸡胸切成比小手指略细的条，玉米淀粉和面粉加清水调成半流动的面糊。鸡胸切成比小手指略细的条，玉米淀粉和面粉加清水调成半流动的面糊。鸡胸切成比小手指略细的条，玉米淀粉和面粉加清水调成半流动的面糊。鸡胸切成比小手指略细的条，玉米淀粉和面粉加清水调成半流动的面糊。鸡胸切成比小手指略细的条，玉米淀粉和面粉加清水调成半流动的面糊。鸡胸切成比小手指略细的条，玉米淀粉和面粉加清水调成半流动的面糊。
								</text>
							</view>	
						</view>
					</view>
					<view class="step_item">
						<view class="display_left">
							<view class="step_left">
								<text>步骤</text>
								<text>step</text>
								<text>4</text>
							</view>	
						</view>
						<view class="display_right">
							<view class="step_right">
								<image src="../../static/img/hotMeal1.jpg"></image>
								<text>
									鸡胸切成比小手指略细的条，玉米淀粉和面粉加清水调成半流动的面糊。鸡胸切成比小手指略细的条，玉米淀粉和面粉加清水调成半流动的面糊。鸡胸切成比小手指略细的条，玉米淀粉和面粉加清水调成半流动的面糊。鸡胸切成比小手指略细的条，玉米淀粉和面粉加清水调成半流动的面糊。鸡胸切成比小手指略细的条，玉米淀粉和面粉加清水调成半流动的面糊。鸡胸切成比小手指略细的条，玉米淀粉和面粉加清水调成半流动的面糊。鸡胸切成比小手指略细的条，玉米淀粉和面粉加清水调成半流动的面糊。
								</text>
							</view>	
						</view>
					</view>
				</view>
			</view>
			
			<!-- 获取后端接口步骤数据 循环显示 后端设计完成后，取消注释 -->
<!-- 			<view class="method">
				<view class="step_list">
						<view class="step_item" v-for="item in stepList" :key="item.index">
							<view class="display_left">
								<view class="step_left">
									<text>步骤</text>
									<text>step</text>
									<text>{{item.stepSum}}</text>
								</view>	
							</view>
							<view class="display_right">
								<view class="step_right">
									<image :src="item.stepImg"></image>
									<text>
										{{item.stepDesc}}
									</text>
								</view>	
							</view>
						</view>
					</view>
				</view>
			</view> -->
			
			<!-- 相关菜谱推荐 -->
			<view>
				<view class="relative_top">
					<view class="cu-bar bg-white" style="border-radius: 20rpx 20rpx 0 0;">
						<view class="action sub-title">
							<text class="text-xl text-bold text-black" style="font-size: 38rpx;">相关菜谱</text>
							<text class="bg-yellow"></text>
							<!-- <text style="float: right; font-size: 28rpx; color: #696969;">查看全部</text> -->
							<!-- last-child选择器-->
						</view>
						<text style="padding-right: 30rpx;">查看全部</text>
					</view>
				</view>
				<view class="relative_list">
					<view class="relative_item">
						<view class="relative_img">
							<image src="../../static/img/hotMeal1.jpg"></image>
						</view>
						<view class="relative_text">
							<text>家常炸鸡柳</text>
							<view class="text_ingre">鸡胸肉，面粉，面包糠，鸡蛋，油</view>
							<view>橘子香味</view>
							<view>27.4万浏览  1954收藏</view>
						</view>
					</view>
					<view class="relative_item">
						<view class="relative_img">
							<image src="../../static/img/hotMeal1.jpg"></image>
						</view>
						<view class="relative_text">
							<text>家常炸鸡柳</text>
							<view class="text_ingre">鸡胸肉，面粉，面包糠，鸡蛋，油</view>
							<view>橘子香味</view>
							<view>27.4万浏览  1954收藏</view>
						</view>
					</view>
					<view class="relative_item">
						<view class="relative_img">
							<image src="../../static/img/hotMeal1.jpg"></image>
						</view>
						<view class="relative_text">
							<text>家常炸鸡柳</text>
							<view class="text_ingre">鸡胸肉，面粉，面包糠，鸡蛋，油</view>
							<view>橘子香味</view>
							<view>27.4万浏览  1954收藏</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				detail: {},
				// 用","分割后的主料、辅料数组
				mainList:[],
				minorList:[],
				// 菜谱步骤数组
				stepList:[]
			}
		},
		methods: {
			// 获取对应id的菜谱信息
			async getDishInfo(){
				const res = await this.$myRequest({
					// 正常
					// url:'mock/669879/api/menu/dish/info/'+this.id
					// 测试
					url:'mock/669879/api/menu/dish/info/1'
				})
				console.log(res)
				this.detail = res.data.dish
				// 获取菜谱的名字，将其作为导航名
				uni.setNavigationBarTitle({
					// title: this.detail.dishName.toString()
					title:"炸鸡柳"
				})
				// 将获取的主料、辅料字符串用","分割成数组
				this.mainList = this.detail.mainIngredient.toString().split(",");
				this.minorList = this.detail.minorIngredient.toString().split(",");
				this.stepList = this.detail.stepEntityList;
			}
		},
		onLoad(options){
			this.id = options.id
			this.getDishInfo()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #EFEEEC;
	}
	// 菜谱详情页样式
	.dish_info{
		// 顶部图片样式
		.dishImg{
			width: 750rpx;
			height: 550rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		// 除顶部图片外，其他元素的样式
		.info_other{
			margin: 20rpx 10rpx;
			// 顶部元素样式（包括：菜谱名、作者、收藏量、浏览量、收藏按钮）
			.top_other{
				display: flex;
				width: 730rpx;
				height: 150rpx;
				// 文字样式（菜谱名、作者、收藏量、浏览量）
				.top_text{
					display: flex;
					flex-direction: column;
					width: 511rpx;
					.dishInfoName {
						font-size: 38rpx;
						font-weight: bold;
						letter-spacing: 5rpx;
						line-height: 80rpx;
					}
					text{
						color: #696969;
						margin-right:20rpx;
					}
				}
				.top_button{
					width: 219rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					button{
						width:219rpx;
						font-size: 30rpx;
					}
				}
			}
			// 简单信息样式（包括：工艺、口味、时间、适宜人群）
			.briefInfo {
				display: flex;
				margin-top:30rpx;
				margin-bottom: 40rpx;
				// 一个信息的样式（如 工艺信息）
				.display_item{
					width:25%;
					display: flex;
					.info_item {
						display: flex;
						flex-direction: column;
						width: 170rpx;
						// height: 300rpx;
						background-color: #FFFFFF;
						margin: 0 auto;
						border-radius: 40rpx;
						.info_icon {
							width:100%;
							height:150rpx;
							border-radius: 40rpx 40rpx 0 300rpx;
							background-color: #f8f8f8;
						}
						.info_text {
							padding: 10rpx 20rpx 30rpx 36rpx;
							display: flex;
							flex-direction: column;
							float: left;
							text:nth-child(1){
								font-size: 28rpx;
								padding-bottom: 20rpx;
							}
							text:nth-child(2){
								font-size: 30rpx;
								font-weight: bold;
							}
						}
					}
			
				}
			}
			// 菜谱特色和菜谱主料、辅料样式
			.dishItem{
				display: flex;
				margin-top: 30rpx;
				// 左边样式
				.item_left {
					background-color: #FFEE99;
					// width: 300rpx;
					width: 20%;
					border-radius: 40rpx 0 0 40rpx;
					.text_left{
						display: flex;
						flex-direction: column;
						padding: 40rpx 20rpx;
						font-weight: bold;
						font-size: 34rpx;
						text:nth-child(1){
							letter-spacing: 10rpx;
						}
						text:nth-child(2){
							font-size:30rpx;
						}
						text-align: center;
					}
				}
				// 右边样式
				.item_right {
					background-color: #FFFFFF;
					width: 80%;
					border-radius: 0 40rpx 40rpx 0;
					.text_right {
						padding: 60rpx 80rpx;
						font-size: 30rpx;
					}
					.button_right {
						display: flex;
						flex-wrap: wrap;
						margin:30rpx 60rpx 30rpx 40rpx;
						button{
							font-size: 28rpx;
							margin:20rpx;
							border: none;
							background-color: #F5F5F5;
						}
						float: left;
						vertical-align: middle;
					}
				}
			}
			
			// 菜谱制作步骤的样式
			.method{
				margin: 40rpx 0;
				// 菜谱步骤列表样式
				.step_list{
					background-color: #FFFFFF;
					border-radius: 0 0 20rpx 20rpx;
					width: 100%;
					// 单个步骤样式
					.step_item{
						display: flex;
						// 左边样式
						.display_left{
							width:15%;
							margin: 40rpx 0 40rpx 40rpx;
							.step_left{
								display: flex;
								flex-direction: column;
								// height: 210rpx;
								padding: 35rpx 30rpx 0 0;
								background-color: #FFEE99;
								border-radius: 40rpx 40rpx 0 40rpx;
								text{
									font-weight: bold;
									font-size: 34rpx;
									text-align: right;
								}
								text:nth-child(2){
									font-size:28rpx;
								}
								text:nth-child(3){
									font-size:56rpx;
									line-height: 125rpx;
								}
							}	
						}
						// 右边样式
						.display_right{
							width:85%;
							padding:40rpx;
							.step_right{
								display: flex;
								flex-direction: column;
								image{
									width: 100%;
									height: 500rpx;
								}
								text{
									padding-top: 40rpx;
									line-height: 55rpx;
								}
							}
						}
			
					}
				}
			}
			// 相关推荐的列表样式
			.relative_list{
				background: #FFFFFF;
				border-radius: 0 0 20rpx 20rpx;
				.relative_item{
					display: flex;
					padding: 30rpx 50rpx;
					
					.relative_img{
						width: 250rpx;
						// width: 25%;
						height: 250rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.relative_text{
						width: 75%;
						height: 220rpx;
						margin-left: 50rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						text:nth-child(1){
							color: #000000;
							font-size: 32rpx;
							font-weight: bold;
							letter-spacing: 5rpx;
						}
						text{
							color: #696969;
							font-size: 26rpx;
						}
						.text_ingre{
							width: 350rpx;
							// 溢出隐藏
							overflow: hidden;
							// 规定文本不进行换行
							white-space: nowrap;
							// 当对象内文本溢出时显示省略标记(...)
							text-overflow: ellipsis;
						}
					}
				}
			}
		}
	}

	

</style>
